<template>
	<ComIndex ref="commonIndexRef" :showFilter="false" :toggleView="false" :isInitList="false">
		<template #search>
			<Search :showSearch="false">
				<template #right>
					<div>
						<a-button @click="close">取消</a-button>
						<a-button type="primary" @click="saveData" :loading="loading"><icon-save />保存</a-button>
					</div>
				</template>
			</Search>
		</template>
		<div class="detail-box" style="padding: 14px">
			<a-form ref="formRef" :model="form" :style="{ width: '600px' }">
				<a-form-item :label="$t('dataModel.role.type')"> {{ bizInfo?.name }} </a-form-item>
				<a-form-item field="roleType" :label="$t('dataModel.role.roleType')" validate-trigger="input">
					<a-radio-group type="button" v-model="form.roleType" @change="form.targetId = []">
						<a-radio :value="item.value" v-for="item in roleType" :key="item.value">{{ item.label }}</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item
					field="targetId"
					:label="$t('dataModel.role.roleTypeVal')"
					validate-trigger="change"
					:rules="[{ required: true, message: $t('base.placeholderSelect') + $t('dataModel.role.roleTypeVal') }]"
				>
					<ComChooseUser v-if="form.roleType === 0" v-model="form.targetId" />
					<ComChoosePost v-else-if="form.roleType === 1" v-model="form.targetId" />
					<ComChooseDept v-else-if="form.roleType === 2" v-model="form.targetId" />
				</a-form-item>
				<a-form-item field="descp" :label="$t('dataModel.role.descp')" validate-trigger="input" :rules="[{ required: true, message: $t('base.placeholder') + $t('dataModel.role.descp') }]">
					<a-textarea v-model="form.descp" :placeholder="$t('base.placeholder') + $t('dataModel.role.descp')" allow-clear />
				</a-form-item>
				<a-form-item field="level" :label="$t('dataModel.role.level')" validate-trigger="input" required>
					<a-radio-group type="button" v-model="form.level">
						<a-radio :value="item.value" v-for="item in level" :key="item.value">{{ item.label }}</a-radio>
					</a-radio-group>
				</a-form-item>
			</a-form>
		</div>
	</ComIndex>
</template>
<script lang="ts" setup>
import ComIndex from "@/components/ComIndex/Index.vue";
import { queryBiz } from "@/api/customerManage/setting";
import { roleAdd, roleUpdate } from "@/api/customerManage/setting";
import { roleType, level } from "@/utils/filter";
const router = useRouter();
const route = useRoute();
const commonIndexRef = ref(null);
const form: any = ref({});
const reset = () => {
	form.value = {
		roleType: 0,
		level: 0,
		targetId: []
	};
};

const close = () => {
	router.go(-1);
};
const loading = ref(false);
const formRef = ref({});
const saveData = async () => {
	const data = await formRef.value.validate();

	if (data) return;
	try {
		loading.value = true;
		const api = configId.value ? roleUpdate : roleAdd;
		await api({ ...form.value, bizId: bizId.value });
		close();
	} catch (error) {
	} finally {
		loading.value = false;
	}
};
const bizInfo = ref({});
const getDetail = async () => {
	const data = await queryBiz({
		id: bizId.value
	});
	bizInfo.value = data;
};
const bizId: any = ref("");
const configId: any = ref("");

watch(
	() => route.query,
	(data) => {
		reset();
		if (data?.bizId) {
			bizId.value = data.bizId;
			getDetail();
		}
	},
	{ immediate: true }
);
</script>

<style scoped lang="scss">
.animate__animated.animate__fadeIn {
	animation-duration: 0.2s;
}
</style>
